<template>
  <div class="app-container-custom">
    <el-row :gutter="10">
      <fold :span="5" :xs="24" :show.sync='sideshow'>
        <el-card shadow="never">
          <org-tree ref="orgTree" modelType="'dept','community','floor','unit','room'" @nodeClick="handleNodeClick"
                    @firstNodeClick="handleNodeClick"/>
        </el-card>
      </fold>
      <el-col :span="sideshow ? 19 : 24" :xs="24">
        <el-card shadow="never">

          <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="" prop="roomId" label-width="0">
              <el-select v-model="queryParams.roomId" placeholder="房屋名称">
                <el-option
                  v-for="item in roomOptions"
                  :key="item.id"
                  :label="item.roomName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="ownerId" label-width="0">
              <custom-filterable
                @cv="(v)=>queryParams.ownerId=v"
                allowCreate
                optionValue="customId"
                placeholder="客户名称"
                :value="queryParams.ownerId"
                :disabled="disabled"
              />
            </el-form-item>
            <el-form-item label="" prop="readingTime" label-width="0">
              <el-date-picker
                v-model="readingTime"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="读数日期开始"
                end-placeholder="读数日期结束">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>

          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
                v-hasPermi="['payfee:copyroom:add']"
              >抄表
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="success"
                plain
                icon="el-icon-edit"
                size="mini"
                :disabled="single"
                @click="handleUpdate"
                v-hasPermi="['payfee:copyroom:edit']"
              >修改
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="danger"
                plain
                icon="el-icon-delete"
                size="mini"
                :disabled="multiple"
                @click="handleDelete"
                v-hasPermi="['payfee:copyroom:remove']"
              >删除
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="warning"
                plain
                icon="el-icon-download"
                size="mini"
                :loading="exportLoading"
                @click="handleExport"
                v-hasPermi="['payfee:copyroom:export']"
              >导出
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                size="mini"
                v-hasPermi="['payfee:copyroom:batchPayfee']"
                @click="handleBatchPayfee"
              >批量生成费用
              </el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
          </el-row>

          <el-table v-loading="loading" :data="copyroomList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column label="房间仪表" align="center" prop="rometerName" width="180">
              <template slot-scope="scope">
                {{`${scope.row.roomName}[${scope.row.kindName}]`}}
              </template>
            </el-table-column>
            <el-table-column label="客户" align="center" prop="ownerName" width="100"/>
            <el-table-column label="上次读数日期" align="center" prop="lastTime" width="120">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.lastTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="上次读数" align="center" prop="lastReading" width="80"/>
            <el-table-column label="读数日期" align="center" prop="readingTime" width="120">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.readingTime, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="本次读数" align="center" prop="theReading" width="80"/>
            <el-table-column label="实际行读" align="center" prop="practicalLine" width="80"/>
            <el-table-column label="调整行度" align="center" prop="adjustLine" width="80"/>
            <el-table-column label="计费行度" align="center" prop="chargedLine" width="80"/>
            <el-table-column label="账单状态" align="center" prop="status" width="80">
              <template slot-scope="scope">
                <span>{{dict.label.copy_romm_status[scope.row.status]}}</span>
              </template>
            </el-table-column>
            <el-table-column label="抄表说明" align="center" prop="readerExplain" show-overflow-tooltip/>
          </el-table>

          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </el-card>
      </el-col>
    </el-row>
    <copy-room-form ref="formRef" @ok="getList"/>

    <el-dialog
      title="查看报告"
      :visible.sync="msg.open"
      width="860px"
    >

      <div class="msg-main">
        <el-row>
          <el-col :span="24">
            <el-badge :value="msg.successMsg.length" class="item" type="success " style="margin-right: 40px;">
              <el-button type="primary" plain size="small" @click="msg.activeName='success'" :class="{'btn-pitch-on':msg.activeName=='success'?true:false}">成功</el-button>
            </el-badge>
            <el-badge :value="msg.errorMsg.length" class="item" >
              <el-button type="primary" plain size="small" @click="msg.activeName='error'" :class="{'btn-pitch-on':msg.activeName=='error'?true:false}">失败</el-button>
            </el-badge>
          </el-col>
          <el-col :span="24">
            <ul class="infinite-list" v-show="msg.activeName=='success'">
              <li v-for="(item,index) in msg.successMsg" :key="index" class="success-item">{{index+1}}、{{item}}</li>
            </ul>
            <ul class="infinite-list"  v-show="msg.activeName=='error'">
              <li v-for="(item,index) in msg.errorMsg" class="error-item">{{index+1}}、{{item }}</li>
            </ul>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
      <el-button @click="msg.open = false">返 回</el-button>
    </span>
    </el-dialog>


  </div>
</template>

<script>
  import { listCopyroom,delCopyroom,exportCopyroom,batchPayfee} from "@/api/payfee/copyroom";
  import CopyRoomForm from "./form"
  import { listMixin } from "@/utils/mixins/listMixin";
  import { listRoom } from "@/api/property/room"
  import CustomFilterable from "@/views/components/filterable/CustomFilterable"

  export default {
    name: "Copyroom",
    dicts:['copy_romm_status'],
    components:{ CopyRoomForm , CustomFilterable },
    mixins:[ listMixin ],
    data() {
      return {
        msg:{
          activeName:'success',
          open:false,
          successMsg:[
          ],
          errorMsg:[
          ]
        },
        // 抄房间仪表表格数据
        copyroomList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          rometerId: null,
          readingTime: null,
          nodeId: null,
          roomId:null,
          ownerId:null
        },
        currentNode:{},
        //房屋字典
        roomOptions:[],
        //读数日期
        readingTime:[]
      };
    },
    created(){

    },
    methods: {
      getListRoom(){
        listRoom({nodeId: this.currentNode.id}).then(res=>{
          this.roomOptions = res.rows
        })
      },
      handleNodeClick(node) {
        this.currentNode = node;
        this.queryParams.nodeId = node.id
        this.getListRoom()
        this.getList()
      },
      /** 查询抄房间仪表列表 */
      getList() {
        this.loading = true;
        let queryParams = this.addDateRange(this.queryParams,this.readingTime,"readingTime")
        listCopyroom(queryParams).then(response => {
          this.copyroomList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.readingTime = []
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.copyId)
        this.single = selection.length !== 1
        this.multiple = !selection.length
        this.selection = selection
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.$refs.formRef.show({currentNode:this.currentNode,type:'ADD'})
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        let yshList = this.selection.filter(row=>row.status != '10')
        if(yshList.length > 0){
          let nos = yshList.map(item => item.roomName)
          let kindName = yshList.map(item => item.kindName)
          this.msgWarning("房间["+nos+`[`+kindName+`]`+"]不是未生成状态,不能修改。")
          return false;
        }
        const copyId = row.copyId || this.ids
        this.$refs.formRef.show({currentNode:this.currentNode,type:'UPDATE',id: copyId})
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        let yshList = this.selection.filter(row=>row.status != '10')
        if(yshList.length > 0){
          let nos = yshList.map(item => item.roomName)
          let kindName = yshList.map(item => item.kindName)
          this.msgWarning("房间["+nos+`[`+kindName+`]`+"]不是未生成状态,不能删除。")
          return false;
        }
        const copyIds = row.copyId || this.ids;
        this.$confirm('是否确认删除抄房间仪表编号为"' + copyIds + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return delCopyroom(copyIds);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(() => {
        });
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有抄房间仪表数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.exportLoading = true;
          return exportCopyroom(queryParams);
        }).then(response => {
          this.download(response.msg);
          this.exportLoading = false;
        }).catch(() => {
        });
      },
      handleBatchPayfee(){
        const id = this.currentNode.id;
        const label = this.currentNode.label;
        if(this.currentNode.modelType=='community'){
          this.batchPayfeeConfirm(id,`是否确认生成当前小区【${label}】下的仪表费用。`,'community')
        }else if(this.currentNode.modelType=='floor'){
          this.batchPayfeeConfirm(id,`是否确认生成当前楼栋【${label}】下的仪表费用。`,'floor')
        }else if(this.currentNode.modelType=='unit'){
          this.batchPayfeeConfirm(id,`是否确认生成当前单元【${label}】下的仪表费用。`,'unit')
        }else if(this.currentNode.modelType=='room'){
          this.batchPayfeeConfirm(id,`是否确认生成当前房屋【${label}】下的仪表费用。`,'room')
        }else{
          this.msgWarning("请选择左侧树节点,小区|楼栋|单元|房屋任意一项在进行创建费用!")
        }
      },
      batchPayfeeConfirm(id,msg,modelType){
        this.$confirm(msg, "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return batchPayfee({businessId:id,businessType:modelType});
        }).then((res) => {
          this.msg.open = true
          this.msg.successMsg = res.data.successMsg
          this.msg.errorMsg =  res.data.errorMsg
          this.getList();
        }).catch(() => {
        });
      }
    }
  };
</script>
<style lang="scss" scoped >
  .msg-main{
    height: 20rem;
    .infinite-list{
      overflow:auto;
      height: 20rem;

      .success-item{
        display: flex;
        align-items: center;
        justify-content: left;
        padding-left: 10px;
        height: 35px;
        background: #67C23A;
        margin: 10px;
        color: #ffffff;
      }

      .error-item{
        display: flex;
        align-items: center;
        justify-content: left;
        padding-left: 10px;
        height: 35px;
        background: #F56C6C;
        margin: 10px;
        color: #ffffff;
      }
    }
  }

  .btn-pitch-on{
    background-color: #1890ff;
    color: #FFFFFF;
  }

</style>
